<template>
  <el-card>
    <div slot="header">
      <h3>定标完善图文</h3>
    </div>
    <div>
      <SkusTable
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
      />
    </div>
    <MaintainImageDialog
      :rules="{}"
      :visible.sync="maintainImage.visible"
      :sku-info="maintainImage.skuInfo"
      :show-submit-btn="false"
      @success="updateImageList"
    />
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import PerfectLink from '../components/PerfectLink';
import MaintainImageDialog from './components/MaintainImageDialog';
import { TableInfo } from '@/utils/getUtils';
import { TABLE_COLUMNS } from '../latentProduct/constants/list';
import skusPage from '@/mixins/commodity/skusPage';
import { seniorLinkedSearchService } from '@/api/commodity/temporaryPurchasingGoods/latentProduct';
export default {
  mixins: [skusPage],
  components: {
    SkusTable,
    PerfectLink,
    MaintainImageDialog
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      maintainImage: {
        visible: false,
        skuInfo: {}
      }
    }
  },
  mounted () {
    this.updateTableColumns()
    this.updateImageList()
  },
  methods: {
    // 更新图文列表
    async updateImageList () {
      const skuNos = JSON.parse(localStorage.getItem('sourcing_bid_skus') ?? '[]')
      const data = skuNos
      const res = await seniorLinkedSearchService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData ?? [])
    },
    // 更新表列
    updateTableColumns () {
      const columns = [
        ...TABLE_COLUMNS.filter(item => item.key !== 'imageStatusStr'),
        {
          title: '图文完善状态',
          fixed: 'right',
          render: (h, { row }) => (
            <PerfectLink
              complete-status={row.imageStatus}
              onClick={() => { this.handlePerfectImage(row) }}
            />
          )
        }
      ]
      this.TableInfo.setColumns(columns)
    },
    // 完善图文
    handlePerfectImage (row) {
      this.maintainImage.visible = true
      this.maintainImage.skuInfo = { skuId: row.uuid, skuNo: row.skuNo }
    }
  }
}
</script>
